<template>
  <div class="editaddress">
    <van-form @submit="save" @click.prevent="clickHanlder">
      <van-cell-group>
        <van-field
          v-model="value1"
          clearable
          label="姓名"
          required
          :rules="[{ required: true, message: '请填写收货人姓名' }]"
          right-icon="warning-o"
          placeholder="收货人姓名"
        />
        <van-field
          v-model="value2"
          clearable
          label="电话"
          required
          :rules="[{ required: true, message: '请填写收货人电话' }]"
          type="tel"
          size="11"
          placeholder="收货人电话"
        />
        <van-field
          v-model="value3"
          clearable
          label="地区"
          required
          readonly
          placeholder="选择省 / 市 / 区"
          :rules="[{ required: true, message: '请选择地区' }]"
          @click="onClick"
        >
          <template #button>
            <van-icon name="arrow" />
          </template>
        </van-field>
        <van-field
          v-model="value4"
          clearable
          label="详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
          required
          placeholder="街道门牌、楼层房间号等信息"
        />
        <van-field
          v-model="value5"
          clearable
          label="邮政编码"
          required
          type="number"
          :rules="[{ required: true, message: '请填写邮政编码' }]"
          placeholder="邮政编码"
        />
      </van-cell-group>
      <van-field readonly clearable label="是否默认">
        <template #button>
          <van-switch v-model="checked" />
        </template>
      </van-field>
      <van-button type="danger" native-type="submit" block round>保存</van-button>
      <van-button native-type="submit" @click="del" v-if="delshow" block round>删除</van-button>
    </van-form>
    <van-popup v-model="show">
      <van-picker
        show-toolbar
        title="标题"
        delshow="true"
        @confirm="onConfirm"
        @cancel="onClick"
        :columns="columns"
        ref="picker"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  GetAddressList,
  AddAddres,
  DelAddres,
  GetAddressOne
} from "@/request/api";
import areaList from "@/util/area.json";

export default {
  created() {
    if (this.$route.params.id != "new") {
      this.delshow = true;
      GetAddressOne({ id: this.$route.params.id }).then(res => {
        console.log(res.data);
      });
    }
    GetAddressList({
      parentId: 1
    }).then(res=>console.log(res)
    )
    //     GetAddressList({
    //   parentId: 49
    // }).then(res => {
    //   console.log(res.data);
    // })
    //  获取城市id 上线后可以 写成脚本 更新 areList 里面的数组，确保数组实时性 this.list 请自己更换一个变量
    // GetAddressList({
    //   parentId: 1
    // }).then(res => {
    //   for (let i = 0; i < res.data.length; i++) {
    //     let key = "text";
    //     let name = res.data[i].name;
    //     let id = res.data[i].id;
    //     this.list[i] = { text: name, id: id };
    //     this.list[i].children = [];
    //     GetAddressList({
    //       parentId: res.data[i].id
    //     }).then(ress => {
    //       for (let o = 0; o < ress.data.length; o++) {
    //         let names = ress.data[o].name;
    //         let ids = ress.data[o].id;
    //         this.list[i].children[o] = { text: names, id: ids };
    //         this.list[i].children[o].children = [];
    //         GetAddressList({
    //           parentId: ress.data[o].id
    //         }).then(resss => {
    //           for (let k = 0; k < resss.data.length; k++) {
    //             let namess = resss.data[k].name;
    //             let idss = resss.data[k].id;
    //             this.list[i].children[o].children[k] = {
    //               text: namess,
    //               id: idss
    //             };
    //           }
    //         });
    //       }
    //     });
    //   }
    // });
  },

  data() {
    return {
      show: false,
      delshow: false,
      list: [],
      city_id: 0,
      checked: false,
      district_id: 0,
      sheng: [],
      province_id: 0,
      value1: "",
      value2: "",
      value4: "",
      value5: "",
      value3: "",
      columns: areaList
    };
  },
  methods: {
    onClick() {
      this.show = !this.show;
    },
    async getlist(data) {
      let s;
      await GetAddressList(data).then(res => (s = res.data));
      return s;
    },
    async shi(data) {
      try {
        for (let x = 0; x < data.length; x++) {
          for (let o = 0; o < data[x].length; o++) {
            let names = data[x][o].name;
            let ids = data[x][o].id;
            this.list[x].children[o] = { text: names, id: ids };
            this.list[x].children[o].children = [];
            // 获取市下面全部区
            await this.getlist({
              parentId: this.list[x].children[o].id
            }).then(res => {
              // 拼接数组
              for (let l = 0; l < res.length; l++) {
                this.list[x].children[o].children[l] = {
                  text: res[l].name,
                  id: res[l].id
                };
              }
            });
          }
        }
      } catch (error) {
        console.log(error);
      }
    },

    async shengid(data) {
      var s = [];
      for (let i = 0; i < data.length; i++) {
        let name = data[i].name;
        let id = data[i].id;
        this.list[i] = { text: name, id: id };
        this.list[i].children = [];
        s[i] = await this.getlist({ parentId: this.list[i].id });
      }
      return s;
    },
    async start() {
      try {
        let s = await this.getlist({ parentId: 1 }); //获取全部省
        let d = await this.shengid(s); // 获取省下面全部市
        let c = await this.shi(d); // 获取市下面全部区
      } catch (error) {}
    },

    onConfirm(value, index) {
      console.log(this.columns[index[0]].children[index[1]]);
      // 设置省市区id index返回的是一个数组分别是3列的索引值
      this.province_id = this.columns[index[0]].id;
      this.city_id = this.columns[index[0]].children[index[1]].id;
      this.district_id = this.columns[index[0]].children[index[1]].children[
        index[2]
      ].id;
      this.value3 = `${value[0]} / ${value[1]} / ${value[2]}`;
      this.show = false;
    },
    save(e) {
      let data = {
        address: this.value4,
        city_id: this.city_id,
        district_id: this.district_id,
        province_id: this.province_id,
        mobile: this.value2,
        name: this.value1,
        is_default: this.checked
      };
      AddAddres(data).then(res => {
        console.log(res.data);
      });
    },
    del() {
      console.log(1);
    }
  }
};
</script>
<style lang="less" scoped>
.editaddress {
  /deep/.van-popup--center {
    width: 100vw;
  }
  /deep/.van-switch__node {
    width: 40%;
    height: 100%;
  }
  /deep/.van-switch--on .van-switch__node {
    -webkit-transform: translateX(2.55555555555em);
    transform: translateX(2.55555555555em);
  }
  /deep/.van-button--block {
    width: 90%;
    margin: 10% 5% 0;
  }
}
</style>